<template>
    <div class="smoke-fade-container">
        <div class="smoke-fade-content">
            <p class="smoke-fade-text" v-for="(item, i) in texts">{{ item }}</p>
        </div>
    </div>
</template>

<script>

export default {
    name: "SmokeFadeText",
    data() {
        return {
            texts: [
                "南有乔木，不可休思；汉有游女，不可求思。",
                "汉之广矣，不可泳思；江之永矣，不可方思。",
                "翘翘错薪，言刈其楚；之子于归，言秣其马。",
                "汉之广矣，不可泳思；江之永矣，不可方思。",
                "翘翘错薪，言刈其蒌；之子于归，言秣其驹。",
                "汉之广矣，不可泳思；江之永矣，不可方思。",
            ],
        }
    },
    methods: {
        fade(e) {
            e.target.classList.add("smoke-fade");
        },
    },
    mounted() {
        const texts = this.$el.querySelectorAll(".smoke-fade-text");
        for (let i = 0; i < texts.length; i++) {
            texts[i].innerHTML = texts[i].textContent.replace(/\S/g, "<span>$&</span>");
        }


        const letters = this.$el.querySelectorAll("span");
        for (let i = 0; i < letters.length; i++) {
            letters[i].addEventListener("mouseover", this.fade);
        }
    },
}
</script>

<style scoped>
.smoke-fade-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.smoke-fade-content {
    text-align: center;
}

.smoke-fade-text {
    font-size: 20px;
    color: #fff;
    letter-spacing: 2px;
    padding: 20px 40px;
}
</style>

<style>
.smoke-fade-text>span {
    position: relative;
    cursor: pointer;
    display: inline-block;
    user-select: none;
}

.smoke-fade {
    transform-origin: top left;
    animation: smoke 9s linear forwards;
}

@keyframes smoke {
    0% {
        opacity: 1;
        filter: blur(0px);
        transform: translate(0, 0) rotate(0deg) scale(1);
    }

    100% {
        opacity: 0;
        filter: blur(10px);
        transform: translate(900px, -600px) rotate(6turn) scale(6);
    }
}
</style>